Introduction

Previously, you recapped the process of fetching JSON data from a remote server, converting it to a format that works for Swift, and then storing it in a Core Data database. In this exercise, you’ll practice applying these skills to prepare the data for use in a mobile application.

Scenario

For the food-ordering functionality of the Little Lemon app to work, it will need to display a list of the restaurant’s offerings. This data is readily available on Little Lemon’s web servers, but you’ll need to take a few steps to make this data usable within the app.

Now that your pages are set up you need to connect to the API to fetch the menu items. Below is a diagram that display how your app needs to connect to the API via HTTP as part of the application flow:

Instructions

Continue in the same project as you did in the last exercises and in the previous lesson. The following zip contains two Swift files that you have to add to your project to use the Core Data easier.

The above zip file contains two files: Persistence.swift and FetchedObjects.swift . Add them both to your project files tree by dragging and dropping them in. Make sure the checkbox "Copy items if needed" is selected at the top of the following dialog.

The Persistence file contains a simple core data setup boilerplate code that sets up a simple database file in memory.

FetchedObjets file contains code that makes it easier to fetch the models from the database. As it was explained in the last course and is not the focus of this exercise, you don't need to worry about it. Just consider it as it is, or in other words, as a struct that retrieves objects from Core Data.

Use the following link for the menu items list: menu data

Follow the steps below to implement fetching menu items from the server and then store them in the database.

Step 1: Creating menu models

Create the models that are necessary to map the JSON you get from the link above:

Create two struct models in two separate swift files. Call one of them " MenuList " and another " MenuItem ". Make both of the structs conform to the Decodable protocol.
Inside the MenuList struct create a single constant property called menu that will hold the Array of MenuItem objects.
Inside the MenuItem struct, declare three constant properties: title , image and price , all of type String .
(Optional) There are more than 3 properties in the menu JSON data, and they are just ignored at the moment. You can optionally add them as well in your model like description etc.

Tip: If you have difficulty completing any of the steps above, please review the following of the course "Working with data in iOS":

Step 2: Querying the server

Open the Menu file you created in the previous exercise, and follow the steps below to create a new method to fetch the menu data from the server. The data can be found at this URL .

Inside the Menu struct, create a new method called getMenuData .
Start by defining a constant that will hold the server url String.
Secondly, initialize the new constant that holds the URL object created from the String server address and because you know the server address is correct - you can force unwrap the URL using ! after the constructor call as it will never crash.
Next, define another constant that will hold the URLRequest instance created using the url constant created in the previous step.
Afterward, use the shared property of the URLSession class and call the method dataTask on it. Use the request object as an argument and a trailing closure to handle the response. Capture the result of the task in a new variable.
Use the task variable to call the resume method on it to start the task.
At the end of the VStack element call onAppear method and inside the trailing closure, call the newly created getMenuData method to get the data each time user goes into the menu screen.

Tip: If you have difficulty completing any of the steps above please review the following materials of the course "Working with data in iOS":

Step 3: Parsing response into models using JSONDecoder

Use JSONDecoder to parse the response data inside the completion closure of the data task:

Inside the data task completion closure, add an if-let statement to safely unwrap data that you get as the first argument of the closure.
Inside the if block, start by declaring a new constant and initialize it with a new JSONDecoder instance.
Next, call the decode method on the decoder instance. Pass the MenuList.self as the first argument, and the unwrapped data object as the second. Remember to put the call in a try? expression and capture the result in a new constant.

Tip: If you have difficulty completing any of the steps above, please review the following of the course "Working with data in iOS":

Step 4: Initialise core data

Follow the list below to initialize Core Data when your application starts:

Open the Home screen file and inside the struct declare a new persistence constant and initialize it by calling the shared property of the PersistenceController .
Add the following method call immediately after the Menu instance initialization and before or after the tabItem method call: .environment(\.managedObjectContext, persistence.container.viewContext) .
Go back to the Menu view file, and inside the struct, declare the following variable: @Environment(\.managedObjectContext) private var viewContext
The Home screen will initialize the Core Data and pass its view context to the Menu instance on initialization.

Step 5: Create a database model file

Create a new file, and select the Data Model file, under the Core Data section in the iOS tab.
Name the file ExampleDatabase , as this is the name of the database that is set in the Persistence Swift file you added.

Step 6: Add a Dish entity

Open the newly created core data model file and press an "Add Entity" button at the bottom which will add a new entity to the model.
Change the entity name to Dish and add three properties to it: title , image and price , all of type String.
(Optional) Remember that if you added more than 3 properties to the menu item model, the dish model would have to have them as well of the same type to be able to convert all data later on.

Tip: If you have difficulty completing any of the steps above please review the following materials of the course "Working with data in iOS":

Step 7: Save mapped menu items into the database

Go back to the Menu view file, and update the getMenuData method to convert the list of MenuItem objects into the list of Dish objects and save them to the database.

Inside the getMenuData function find the constant that holds the result of decoded menu items.
Access the menu property of the result, and use a for loop, for example, to iterate over each menu item inside the menu property.
Inside the loop block, for each item, initialize a new Dish instance and store it into a constant.
Use that constant to set the title , image and price from the menu item same properties.
After the loop ends, add the following call to save the data into the database: try? viewContext.save() .
To clear the database each time before saving the menu list again, on the first line of the getMenuData method, before any other code is executed, use the shared property of the PersistenceController and call the clear method on it. It will make sure that the database is cleared of all the Dish data before fetching and storing the new ones again.

Tip: If you have difficulty completing any of the steps above please review the following materials of the course "Working with data in iOS":

Step 8: Displaying the list of menu items from the database

Update the List element of the Menu view to display the Dish items that were saved to the database.

Remove the List element from the Menu view for now, and in its place, add the following call to it: FetchedObjects: FetchedObjects() { (dishes: [Dish]) in } . This will fetch all the Dishes from the core data and make them available to use in the closure.
Inside the closure add a List element.
Inside the list element, use the ForEach element and pass the dishes argument of the closure to its constructor.
Add a trailing closure right after the ForEach element initialization and make closure get a single dish argument.
Inside the ForEach trailing closure body, add a new HStack element.
Inside the stack element, add a Text element and initialize it with a String that would be a combination of the title and the price of the dish argument of the closure to display them.
Also, inside the stack, after the text element add an AsyncImage element and initialise it by using the constructor that takes a url argument. Create a new URL object using the image property of the dish variable, and set it to the constructor.
Images might be too big, so you will have to style them to resize them. You can read about the AsyncImage styling here .

Tip: If you have difficulty completing any of the steps above please review the following materials of the course "Working with data in iOS":

Step 9: Run the code

Run the application. Register, and when you see the home screen with the menu tab, the on-appear function should fetch the menu data, decode it with JSONDecoder , save it to the database by converting the menu items to the Dish objects and finally store them in the database. Immediately after that, the FetchedObjects element will notice that and fetch all the Dish objects from the database and display them in the list as text and image .

You should see a list of menu item information that you have entered inside the text and image elements in the last part of step 7.

(Optional) Step 10: Dish details screen

You could wrap the HStack added in step 8 inside the NavigationLink and create a new SwiftUI file to represent the details of the menu item. The new details screen would need a local constant of a dish. Then you would initialize a new instance of the details screen with a dish argument of the closure, and pass it to the destination parameter in the navigation link constructor. Then it's up to you what information and how would you display it inside the dish details screen. When using the application, when the user presses on any dish row, they will be taken to the details screen.

Conclusion

By completing this exercise, you have implemented data models using a Decodable protocol, fetched a menu list from the server address and mapped them with the JSONDecoder to the models. You also have set up the core data database and initialized it at the start of the application. Finally, you have converted the decoded models to the core data entities, stored them inside the database and displayed them in the Menu screen using the List element.